---
title: "Color Wheel"
description: A circular color selection tool that visualizes the full color spectrum for intuitive and precise color picking.
order: 7
published: true
references: ["https://react-spectrum.adobe.com/react-aria/ColorWheel.html#props"]
---

## Basic
A color wheel allows users to select a color through an interactive circular interface.
<How toUse="colors/color-wheel/color-wheel-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/color-wheel
```

## Composed components
<Composed components={['color-thumb']}/>

## Manual installation
```bash
npm i react-aria-components
```
<SourceCode toShow='color-wheel'/>

## Anatomy
```
import { ColorWheel } from "@/components/ui/color-wheel"
<ColorWheel aria-label="Background color" />
```

## Controlled
Manage the color wheel in a controlled manner, adjusting the color value as needed.
<How toUse="colors/color-wheel/color-wheel-controlled-demo" />

## Disabled
Disable the color wheel to prevent interaction.
<How toUse="colors/color-wheel/color-wheel-disabled-demo" />
